<template>
	<div class="spread con sale_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/vendor' }">Homepage</el-breadcrumb-item>
			<el-breadcrumb-item>VenderList</el-breadcrumb-item>
		</el-breadcrumb>
		<div style="margin-left: 10px;margin-bottom:10px;">
		
			<el-input v-model="VendorName" placeholder="Search Vendor name" style="width:20%" filterable clearable ></el-input>
			<el-button type="info" icon="el-icon-search" @click="handerSearch">Search</el-button>
			
			<el-button type="danger" icon="el-icon-tickets" @click="addVendor()">add New</el-button>
			
			<!--<el-button type="primary" icon="el-icon-edit" @click="detail()">EDIT</el-button>
			<el-button type="danger" icon="el-icon-delete" @click="vendorDel()">DETELE</el-button> -->
			
			
			
			<div style="float:right ">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="page.per_page"
					:page-size="page.size"
					@current-change="handleCurrentChange"
					:current-page.sync="page.currentPage"
				></el-pagination>
			</div>
			
		</div>

		<el-table
			v-loading="loading"
			element-loading-text="loading"
			:data="tableData"
			style="width: 100%"
			:height="tableHeight"
			border
			fit
			highlight-current-row
			@row-click="rowClick"
			@current-change="shandleCurrentChange"
		>
			
			<el-table-column label="Code" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.VendorCode }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Alias" width="230" >
				<template slot-scope="scope">
					<span>{{ scope.row.CompanyAlias }}</span>
				</template>
			</el-table-column>
			<el-table-column label="CompanyName" width="230">
				<template slot-scope="scope">
					<span>{{ scope.row.CompanyName }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="Region" width="80">
				<template slot-scope="scope">
					<span>{{ scope.row.CountryRegion }}</span>
				</template>
			</el-table-column>
			<el-table-column label="Country" width="80">
				<template slot-scope="scope">
					<span>{{ scope.row.CountryName }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="Orders" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.OrderNum }}</span>
				</template> 
			</el-table-column>
			<el-table-column label="Quotes" width="100">
				<template slot-scope="scope">
					<span>{{ scope.row.QuoteNum }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="CompanyAddress" width="210">
				<template slot-scope="scope">
					<span>{{ scope.row.CompanyAddress }}</span>
				</template>
			</el-table-column>
			
			<el-table-column label="OrderDate" width="130">
				<template slot-scope="scope">
					<span>{{ isTimeString(scope.row.LastOrderDate) }}</span>
				</template>
			</el-table-column>

			<el-table-column label="ContactDate" width="120">
				<template slot-scope="scope">
					<span>{{ isTimeString( scope.row.LastContactDate) }}</span>
				</template>
			</el-table-column>
			
		</el-table>

		
		
		<!-- 弹出 -->
			<el-dialog title="Add New Vendor" :visible.sync="VendorformVisible">
				<el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="150px" style="margin-top:-50px;">
				 <el-row class="good_detail">
					 			 
					 <div class="canEdit">
						 <el-form-item label="CompanyAlias" prop="CompanyAlias" >
						   <el-input v-model="ruleForm.CompanyAlias"  placeholder="CompanyAlias"></el-input>
						 </el-form-item>
						 <el-form-item label="CompanyName"  prop="CompanyName">
						   <el-input v-model="ruleForm.CompanyName"  placeholder="CompanyName"></el-input>
						 </el-form-item>
						  <el-form-item label="CompanyName2" prop="CompanyName2">
						   <el-input v-model="ruleForm.CompanyName2"  placeholder="CompanyName2"></el-input>
						 </el-form-item>
						 
						 <el-form-item label="Country"   prop="CountryID">
							  <el-col :span="3">
							   <el-input v-model="ruleForm.City"></el-input>
							  </el-col>
							  
						  	 <el-col class="line" :span="1">——</el-col>
						   	<el-col :span="3">
							   <el-input v-model="ruleForm.State" prop="State"></el-input>
							</el-col>
							  <el-col class="line" :span="1">——</el-col>
						    <el-col :span="11">
							   <el-select v-model="ruleForm.CountryID" placeholder="Please choose"  >
									  <el-option v-for="(item, index) in CountryArea" :key="index" :label="item.CountryName" :value="item.CountryID"></el-option>
							    </el-select>
						    </el-col> 
						 </el-form-item>
						 
						  <el-form-item label="CompanyAddress"  prop="CompanyAddress">
						    <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.CompanyAddress"></el-input>
						  </el-form-item>
						 <el-form-item label="Url" prop="WEBUrl">
						   <el-input v-model="ruleForm.WEBUrl"  placeholder="Url"></el-input>
						 </el-form-item>
						  <el-form-item label="CompanyInfo" prop="CompanyInfo">
						    <el-input type="textarea"  :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.CompanyInfo"></el-input>
						  </el-form-item>
						   <el-form-item label="ProductInfo" prop="ProductInfo">
						    <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.ProductInfo"></el-input>
						  </el-form-item>
					 </div>
					  
					</el-row>
						  
				  <el-form-item class="submit">
				    <el-button type="primary" @click="addVendorSave('ruleForm')">Save</el-button>
				    <el-button @click="VendorformVisible = false">Cancel</el-button>
				  </el-form-item>
				</el-form>	
			
			</el-dialog>
			
			
			
			 <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			    <el-tab-pane label="Contacts" name="first">
					<template>
							<div class="spread con customer_index">
							<div>
									<div style="margin-top:10px;">
										<el-button  type="danger" icon="el-icon-tickets" @click="AddContact()">Add New</el-button>
									<!--	<el-button  type="danger" icon="el-icon-tickets" @click="ContactView()">Edit </el-button>
										<el-button  type="danger" icon="el-icon-tickets" @click="ContactDel()">Delete</el-button>-->
									</div> 
								</div>
								<el-table 
									v-loading="loading"
									element-loading-text="Loading"
								    :data="ContactstableData"
								    style="width: 100%"
									:height="tableHeight"
									 ref="contactsTable"
								    border
								    fit
								    highlight-current-row
						    		@current-change="CurrentChangeContacts"
								   >
									<el-table-column
								      label="ContactName" width="140">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.ContactName }}</span>
								      	</template>
								    </el-table-column>	
								    <el-table-column
								      label="Email" width="200">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.Email }}</span>
								      	</template>
								    </el-table-column>	
								    <el-table-column
								      label="Phone1" width="150">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.Phone1 }}</span>
								      	</template>
								    </el-table-column>
								    <el-table-column
								      label="Phone2" width="120">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.Phone2 }}</span>
								      	</template>
								    </el-table-column>
								    <el-table-column
								      label="Fax" width="120">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.Fax }}</span>
								      	</template>
								    </el-table-column>
								    
								    <el-table-column
								      label="Mobile1" width="120">
								      	<template slot-scope="scope">
								        	<span >{{ scope.row.Mobile1 }}</span>
								      	</template>
								    </el-table-column>
								    <el-table-column
								      label="AddressLine" width="200">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.AddressLine }}</span>
								      	</template>
								    </el-table-column>
								    
								     <el-table-column
								      label="JobTitle" width="200">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.JobTitle }}</span>
								      	</template>
								    </el-table-column>
								    
								     <el-table-column
								      label="Department" width="200">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.Department }}</span>
								      	</template>
								    </el-table-column>
								     <el-table-column
								      label="createdBy" width="200">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.createdByName }}</span>
								      	</template>
								    </el-table-column>
								     <el-table-column
								      label="createdDate" width="120">
								      	<template slot-scope="scope">
								        	<span>{{ objTimeString(scope.row.createdDate) }}</span>
								      	</template>
								    </el-table-column>
								     <el-table-column
								      label="UpdatedBy" width="200">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.UpdatedbyName }}</span>
								      	</template>
								    </el-table-column>
								    
								     <el-table-column
								      label="UpdatedDate" width="120">
								      	<template slot-scope="scope">
								        	<span>{{ objTimeString(scope.row.UpdatedDate) }}</span>
								      	</template>
								    </el-table-column>
								    
								    <el-table-column
								      label="status" width="150">
								      	<template slot-scope="scope">
								        	<span>{{ scope.row.ContactStatusName }}</span>
								      	</template>
								    </el-table-column>
								  </el-table> 
								  
								  <!-- contacts ADD  -->
				   <el-dialog title="Add New Contact" :visible.sync="dialogFormVisible">
					  <el-form :model="Contactform" :rules="rulesContact" ref="Contactform" >
					     <el-form-item label="ContactName"  prop="ContactName" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.ContactName"></el-input>
					    </el-form-item>
					    
					    <el-form-item label="Gender" prop="Gender" :label-width="formLabelWidth">
					      <el-select v-model="Contactform.Gender" placeholder="Please choose"  >
					      	  <el-option label="NoInfo" :value="1"></el-option>
							  <el-option label="Mr" :value="2"></el-option>
				              <el-option label="Ms" :value="3"></el-option>
				              <el-option label="Mrs" :value="4"></el-option>
					      </el-select>
					    </el-form-item>
					    
					    <el-form-item label="Nickname" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Nickname" ></el-input>
					    </el-form-item>
					    <el-form-item label="JobTitle" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.JobTitle" ></el-input>
					    </el-form-item>
					    <el-form-item label="Department" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Department" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone1"  prop="Phone1"  :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Phone1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Phone2" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Phone2"></el-input>
					    </el-form-item>
					    <el-form-item label="Fax" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Fax" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Mobile1" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Mobile1" ></el-input>
					    </el-form-item>
					    <el-form-item label="Mobile2" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Mobile2" ></el-input>
					    </el-form-item>
					     
					    <el-form-item label="Email" prop="Email"  :label-width="formLabelWidth">
					      <el-input v-model="Contactform.Email" ></el-input>
					    </el-form-item>
					   <el-form-item label="PersonalEmail" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.PersonalEmail" ></el-input>
					    </el-form-item>
					    <el-form-item label="IMAddress" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.IMAddress" ></el-input>
					    </el-form-item>
					    <el-form-item label="AddressLine" :label-width="formLabelWidth">
					      <el-input v-model="Contactform.AddressLine" ></el-input>
					    </el-form-item>
					    
					  </el-form>
					  <div slot="footer" class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">Cancel</el-button>
					    <el-button type="primary"  @click="contactsubmitForm('Contactform')">Save</el-button>
					  </div>
				</el-dialog>
					    	</div>
					    	
					 </template>	
			    </el-tab-pane>
			    
			  <!--  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
			    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
			 </el-tabs>
	</div>
</template>

<script type="text/javascript">
export default {
	data() {
		var sdDate = [];
		return {
			activeName: 'first',
			loading: false,
			tableData: [],
			tableHeight: 250,
			token: '',
			keyword: '',
			VendorName:'',
			rantime: [],
			currentRow: [],
			arr: [],
			listQuery: { sortby: '', order: 'desc' },
			fileDwonload: false,
			url: '',
			btt: [],
			ruleForm:{
					ProductInfo: '',
					CompanyAlias:'',
					CompanyName:'',
					CountryID:'',
					WEBUrl:'',
					CompanyInfo:'',
					City:'',
					CompanyName2:'',
					CompanyAddress:'',
					State:'',	
						
					},
			VendorformVisible:false,
			CountryArea:[],
			
			ContactstableData:[],
			currentRowContacts:'',
			formLabelWidth: '160px',
			dialogFormVisible:false,
			Contactform:{
					ContactName:'',
					Gender:1,
					Nickname:'',
					JobTitle:'',
					Department:'',
					Phone1:'',
					Phone2:'',
					Fax:'',
					Mobile1:'',
					Mobile2:'',
					Email:'',
					PersonalEmail:'',
					IMAddress:'',
					AddressLine:''
				},
			 rulesContact:{
				       ContactName: [
				            { required: true, message: 'Please enter ContactName', trigger: 'blur' },
				            { min: 2, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
				          ],
			           Gender: [
				            { required: true, message: 'Please choose Gender', trigger: 'change' }
				          ],      
				     Phone1: [
				             { required: true, message: 'Please enter Phone1', trigger: 'blur' },
						     { min: 7, max: 20, message: '7 to 20 characters in length', trigger: 'blur' }
				          ],  
				      Email: [
				             { required: true, message: 'Please enter Email', trigger: 'blur' },
						     { min: 3, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
				          ],
				          
				      
				      },	
				
			rules:{
					CompanyAlias: [
				            { required: true, message: 'Please enter CompanyAlias', trigger: 'blur' },
				            { min: 3, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
				          ],
          			CompanyName: [
				            { required: true, message: 'Please enter CompanyName', trigger: 'blur' },
				            { min: 3, max: 55, message: '3 to 55 characters in length', trigger: 'blur' }
				          ],
          			CountryID: [
				            { required: true, message: 'Please choose Country', trigger: 'change' }
				          ],
				    
				    
			
					},
			page: {
				total: 0,
				size: 1,
				currentPage: 1,
				num: 1
			},
			sort: 1
			
		};
	},

	created() {
		//this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
		this.getVendorList();
		this.getCountry();
	},
	mounted() {
		
		// 动态设置表格高度适应窗口
		window.onresize = () => {
			let a = window.innerHeight;
			that.tableHeight = a - 403;
		};
	},
	methods: {
			
		getVendorList(){
			this.loading = true;
			axios
				.get('/api/CMSVenderList?keyword='+this.VendorName +'&page=' +this.page.num).then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result.data;
						this.page.total = result.data.result.total;
						//this.page.size = result.data.result.per_page;
						this.page.per_page = result.data.result.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: '错误',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: '错误',
						message: result.data.message
					});
				});
		},
		getCountry(){
					axios.get('/api/country').then(result => {
						this.CountryArea = result.data.result;
					});
				
				},	
		//添加
		addVendor(){
			this.VendorformVisible = true;
		
		},
		
		addVendorSave(formName){
		        this.$refs[formName].validate((valid) => {
		          if (valid) {
		          	axios.post('/api/CMSvenderAdd',{pagram:this.ruleForm })
					.then(result => {
						if (result.data.code == 200) {
						this.$notify.success({
							title: 'Success',
							message: result.data.message
						});
						this.VendorformVisible = false;
						
					} else {
						this.$notify.error({
							title: 'Error',
							message: result.data.message
						});
					}
						
					})
					.catch(error => {
						this.$message.error({
						title: 'Error',
						message: 'Please enter '
					});
					})
		          } else {
		            this.$message.error({
						title: 'Error',
						message: 'Please enter *'
					});
		            return false;
		          }
		        });
		
		
		},
		
		detail() {
			if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: '请选择一行' });
				return false;
			}
			// 关闭跳转
			this.$router.push({ path: '/venderdetail?VendorID=' +this.currentRow.VendorID });
		},
		vendorDel(){
			if (this.currentRow.length <= 0) {
				this.$notify({ type: 'error', message: '请选择一行' });
				return false;
			}
		axios.post('/api/customer/venderdel', {
							VendorID  : this.currentRow.VendorID,
						  })
						  .then(res => {
							if(res.data.code ==200){
								this.$notify({
								  title: 'Success',
								  message: res.data.message,
								  type: 'success'
								});
								this.getVendorList();
								
							}
						  	
						  })
						  .catch(error => {
							  this.$notify.error({
							    title: 'Fail',
							    message: error.data.message,
							  });
						  })
		
		},
		handerSearch() {
			this.page.num = 1;
			this.getVendorList();
		},

		handleCurrentChange(val) {
			this.page.num = val;
			this.getVendorList()
		},
		//rowClick 点击
		rowClick(row){
			this.companycontact(row.companyID);
		},
		companycontact(companyID){
			axios.get('/api/companycontact?CompanyID='+companyID).then(result => {
					this.ContactstableData = result.data.result;
				});
		
		},
		CurrentChangeContacts(val){
	    	 this.currentRowContacts = val;
	    },
		
		shandleCurrentChange(data) {
			this.currentRow = data;
		},
		
		handleClick(tab, event) {
	        console.log(tab, event);
	      },
	      
	      //添加联系人
	      AddContact(){
	     	 if(this.currentRow.length<=0){
				    		this.$alert('Please choose MainList one line.', 'Tips', {
			                  confirmButtonText: 'confirm'
					        });
					        return;
				    	}
	      	this.dialogFormVisible =true;
	      
	      },
	      
	      contactsubmitForm(formName){
	      		
				     var CompanyID =this.currentRow.companyID; 
					 console.log(1111,CompanyID,this.currentRow);
					 //var  reg =/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
					 var reg=/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/ ;
					 if(!reg.test(this.Contactform.Email)){
					 	 this.$message.error("Emial");
			         	 return;
					 }
					this.$refs[formName].validate((valid) => {
			          if (valid) {
			        	 axios.post('/api/customer/contactsadd',{
			        	 	CompanyID:CompanyID,
			        		ContactName:this.Contactform.ContactName,
			        		Gender:this.Contactform.Gender,
			          		Nickname:this.Contactform.Nickname,
			          		JobTitle:this.Contactform.JobTitle,
			          		Department:this.Contactform.Department,
			          		Phone1:this.Contactform.Phone1,
			          		Phone2:this.Contactform.Phone2,
			          		Fax:this.Contactform.Fax,
			          		Mobile1:this.Contactform.Mobile1,
			          		Mobile2:this.Contactform.Mobile2,
			          		Email:this.Contactform.Email,
			          		PersonalEmail:this.Contactform.PersonalEmail,
			          		IMAddress:this.Contactform.IMAddress,
			          		AddressLine:this.Contactform.AddressLine
			          	})
			          	.then(result => {
								if (result.data.code == 200) {
									this.dialogFormVisible = false;
									this.companycontact(CompanyID);
								} else {
									this.$message.error({
										title: 'Error',
										message: result.data.message
									});
								}
							})
			          }else {
			            this.$message.error({
									title: 'Error',
									message: 'Please enter *'
								});
			            return false;
			          }
					});	
	      
	      
	      
	      },
      
		isTimeString(time){
		    	if(time=='' || time== null || time == 'undefined'){
		    	 return '';
		    	}else{
		    		return time.substring(0,10);
		    	}
		    },
		    
	    objTimeString(time){
		    if(time=='' || time== null || time == 'undefined'){
		    	 return '';
		    	}else{
		    		return time.date.substring(0,10);
		    	}
	    },
		addTime(m) {
			return m < 10 ? '0' + m : m;
		},

		getTime() {
			var date = new Date();
			let y = date.getFullYear();
			let m = date.getMonth() + 1;
			let d = date.getDate();
			// console.log(d)
			let time = y + '-' + m + '-' + d;
			let d1 = '01';
			let time1 = y + '-' + m + '-' + d1;
			this.rantime[0] = time1;
			this.rantime[1] = time;
		},

		timeFormat(shijianchuo) {
			//shijianchuo是整数，否则要parseInt转换
			var time1 = new Date(shijianchuo);
			var y = time1.getFullYear();
			var m = time1.getMonth() + 1;
			var d = time1.getDate();
			var h = time1.getHours();
			var mm = time1.getMinutes();
			var s = time1.getSeconds();
			return y + '-' + this.addTime(m) + '-' + this.addTime(d) + ' ' + this.addTime(h) + ':' + this.addTime(mm) + ':' + this.addTime(s);
		}
	}
};
</script>

<style lang="scss">
.sale_index {
	.sort.el-select .el-input {
		width: 140px;
	}
	.el-button-group {
		position: relative;
		top: -1px;
	}
}

.el-table .warning-row {
	background: oldlace;
}

.input-with-select .el-input-group__prepend {
	background-color: #fff;
}
.el-table .success-row {
	background: #f0f9eb;
}
.con {
	.el-breadcrumb {
		height: 40px;
	}
	.juli {
		margin-left: 10px;
	}
}
.el-pagination__total {
	float: left;
	margin-top: 2px;
}
.pages {
	float: right;
}
</style>
